<template>
<!--    can be used as table model-->
    <div>
        <el-breadcrumb  separator="/">
            <el-breadcrumb-item :to="{ path: '/main/' }" class="a">房源基建</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/main/first' }" class="b">床位管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button type="primary" class="btn2" @click="dialogFormVisible=true"><div>批量设置</div></el-button>
        <el-button type="primary" class="btn1" @click="dialogForm2Visible=true"><div>添加房间</div></el-button>
        <el-dialog title="添加房间"  :visible.sync="dialogForm2Visible" width="500px">
            <el-form :model="ruleForm" :rules="rules1" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="园区" prop="idYq" >
                    <el-select  v-model.number="ruleForm.idYq" placeholder="请选择园区" @change="resetFormUpdate1()" >
                        <el-option
                            v-for="item in yqData"
                            :label="item.nameYq"
                            :value="item.idYq"
                            :key="item.idYq">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="楼栋" prop="building" >
                    <el-select v-model="ruleForm.building" placeholder="请选择对应楼栋" @input="getFloorNumber()">
                        <el-option
                            v-for="item in filterItems"
                            :label="item.nameBuildings"
                            :value="item.idBuildings"
                            :key="item.idBuildings">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在楼层" prop="floor" >
                    <el-select v-model.number="ruleForm.floor" placeholder="请选择楼层">
                        <el-option
                            v-for="count in floorNumber "
                            :key="count"
                            :label="count"
                            :value="Number(count)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房间号" prop="roomName" >
                    <el-input type="textarea" v-model="ruleForm.roomName" placeholder="请输入房间号" ></el-input>
                </el-form-item>
                <el-form-item label="床位数量" prop="beds">
                    <el-select v-model="ruleForm.beds" placeholder="请输入床位数量">
                        <el-option label="4" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item   label="默认价格" prop="default_price">
                    <el-select v-model="ruleForm.default_price" placeholder="请输入价格" >
                        <el-option label="1000" value="1000"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
<!--        -->
        <el-dialog title="批量添加" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="form" :rules="rule2" ref="form" label-width="100px">
                <el-form-item label="园区" prop="idYq"  >
                    <el-select  v-model.number="form.idYq" placeholder="请选择园区" @change="resetFormUpdate()">
                        <el-option
                            v-for="item in yqData"
                            :label="item.nameYq"
                            :value="item.idYq"
                            :key="item.idYq"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="楼栋" prop="building" >
                    <el-select v-model="form.building" placeholder="请选择对应楼栋" @input="getFloorNumber2()">
                        <el-option
                            v-for="item in filterItems2"
                            :label="item.nameBuildings"
                            :value="item.idBuildings"
                            :key="item.idBuildings">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在楼层" prop="floor" >
                    <el-select v-model.number="form.floor" placeholder="请选择楼层">
                        <el-option
                            v-for="count in floorNumber2 "
                            :key="count"
                            :label="count"
                            :value="Number(count)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房间数量" prop="quantity" >
                    <el-input  v-model.number="form.quantity" placeholder="请输入房间数量" ></el-input>
                </el-form-item>
                <el-form-item label="床位数量" prop="beds">
                    <el-select v-model.number="form.beds" placeholder="请输入床位数量">
                        <el-option label="4" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item   label="默认价格" prop="default_price">
                    <el-select v-model="form.default_price" placeholder="请输入价格" >
                        <el-option label="1000" value="1000"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm2('form')">提交</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
<!--        -->
        <el-dialog title="编辑房间"  :visible.sync="dialogForm3Visible" width="480px">
            <el-form :label-position="lp" :model="form3" :rules="rule3" ref="form3"  class="demo-ruleForm">
                <el-form-item label="房间编号"  >
                    <el-input  v-model="form3.nameRooms" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="所在楼层"  >
                    <el-input v-model="form3.floorRooms" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="床位数量" >
                    <el-input v-model="form3.bedsRooms" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" >
                    <el-switch v-model="form3.isEnabled"></el-switch>
                </el-form-item>
                <el-form-item   label="默认价格" >
                    <el-input v-model="form3.priceRooms" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm3">提交</el-button>
                    <el-button @click="dialogForm3Visible=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-container>
            <el-main class="std" >
                <el-table
                    :data="roomData"
                    style="width: 100%"
                    stripe>
                    <el-table-column
                        prop="yqRooms"
                        label="所在园区">
                        <template slot-scope="scope">
                            {{formatYq(scope.row.yqRooms)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="buildingsRooms"
                        label="所在楼栋">
                        <template slot-scope="scope">
                            {{formatBuildings(scope.row.buildingsRooms)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="nameRooms"
                        label="房间名称"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="bedsRooms"
                        label="床位数">
                    </el-table-column>
                    <el-table-column
                        label="是否启用">
                        <template slot-scope="scope">
                            <el-switch disabled v-model=" scope.row.isEnabled "></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="priceRooms"
                        label="房间价格">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer class="std2" >
                <el-pagination class="btm_choseBox"
                               background
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="query.pageNo"
                               :page-sizes="[10,20,50,100]"
                               :page-size="query.pagesize"
                               layout="total, sizes, prev, pager, next"
                               :total="total">
                </el-pagination>
            </el-footer>
        </el-container>

    </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import {
  yqList,
  buildingList,
  roomList,
  insertRooms,
  editbedManage,
  // eslint-disable-next-line no-unused-vars
  insertRoomsPlus,
  countRoomsNumber
} from '../../../../api/user'

export default {
  name: 'second',
  data () {
    return {
      query: {
        idRooms: '',
        nameRooms: '',
        yqRooms: '',
        buildingRooms: '',
        floorRooms: '',
        bedsRooms: '',
        isEnabled: '',
        priceRooms: '',
        pageNo: 1,
        pagesize: 10
      },
      query2: {
        idYq: '',
        nameYq: ''
      },
      query3: {
        idBuildings: '',
        yqBuildings: '',
        nameBuildings: '',
        floorsBuildings: ''
      },
      total: 0,
      yqData: [],
      buildingData: [],
      roomData: [],
      sentData: {
        nameRooms: '',
        yqRooms: '',
        buildingsRooms: '',
        floorRooms: '',
        bedsRooms: '',
        priceRooms: ''
      },
      findBuilding: {
        yqBuildings: '',
        buildingRooms: ''
      },
      dataProcessed: {},
      dataList: [],
      form3: {},
      floorNumber: 1,
      floorNumber2: 1,
      lp: 'top',

      dialogFormVisible: false,
      dialogForm2Visible: false,
      dialogForm3Visible: false,

      form: {
        idYq: null,
        building: null,
        floor: '',
        prefix: '',
        quantity: null,
        beds: null,
        default_price: ''
      },
      rule2: {
        idYq: [
          { required: true, message: '请选择园区', trigger: 'blur' }
        ],
        building: [
          { required: true, message: '请选择楼栋', trigger: 'blur' }
        ],
        floor: [
          { required: true, message: '请选择楼层', trigger: 'blur' }
        ],
        prefix: [
          {required: true, message: '请输入房间前缀', trigger: 'blur'}
        ],
        quantity: [
          {pattern: /^[1-9]\d*$/, required: true, message: '请输入房间数量', trigger: 'blur'}
        ],
        beds: [
          { required: true, message: '请选择床位数', trigger: 'blur' }
        ],
        default_price: [
          { required: true, message: '请输入价格', trigger: 'blur' }
        ]
      },

      rule3: {

      },

      ruleForm: {
        idYq: null,
        building: null,
        floor: '',
        roomName: '',
        beds: null,
        default_price: ''
      },
      rules1: {
        idYq: [
          { required: true, message: '请选择园区', trigger: 'blur' }
        ],
        building: [
          { required: true, message: '请选择楼栋', trigger: 'blur' }
        ],
        floor: [
          { required: true, message: '请选择楼层', trigger: 'blur' }
        ],
        roomName: [
          { required: true, message: '请输入房间名称', trigger: 'blur' }
        ],
        beds: [
          { required: true, message: '请选择床位数', trigger: 'blur' }
        ],
        default_price: [
          { required: true, message: '请输入价格', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    edit (row) {
      this.form3 = JSON.parse(JSON.stringify(row))
      this.dialogForm3Visible = true
    },
    getRoomList () {
      roomList(this.query).then(res => {
        this.roomData = res.data.records
        this.total = res.data.total
      })
    },
    getBuildingList () {
      buildingList(this.query3).then(res => {
        this.buildingData = res.data.records
      })
    },
    getYqList () {
      yqList(this.query2).then(res => {
        this.yqData = res.data.records
      })
    },
    getFloorNumber () {
      let n0 = this.ruleForm.building
      for (var i = 0; i < this.buildingData.length; i++) {
        if (this.buildingData[i].idBuildings === n0) { this.floorNumber = this.buildingData[i].floorsBuildings }
      }
    },
    getFloorNumber2 () {
      let n0 = this.form.building
      for (var i = 0; i < this.buildingData.length; i++) {
        if (this.buildingData[i].idBuildings === n0) { this.floorNumber2 = this.buildingData[i].floorsBuildings }
      }
    },
    formatYq (yq) {
      for (var i = 0; i < this.yqData.length; i++) {
        if (this.yqData[i].idYq === yq) { return this.yqData[i].nameYq }
      }
    },
    formatBuildings (buildings) {
      let n0 = ''
      for (var i = 0; i < this.buildingData.length; i++) {
        if (this.buildingData[i].idBuildings === buildings) { n0 = this.buildingData[i].nameBuildings; break }
      }
      return n0
    },
    passValue () {
      this.sentData.nameRooms = this.ruleForm.roomName
      this.sentData.yqRooms = this.ruleForm.idYq
      this.sentData.buildingsRooms = this.ruleForm.building
      this.sentData.floorRooms = this.ruleForm.floor
      this.sentData.bedsRooms = this.ruleForm.beds
      this.sentData.priceRooms = this.ruleForm.default_price
      insertRooms(this.sentData)
    },
    passValue2 () {
      var dataList = []
      let countNumber1
      this.sentData.yqRooms = this.form.idYq
      this.sentData.buildingsRooms = this.form.building
      this.sentData.floorRooms = this.form.floor
      this.sentData.bedsRooms = this.form.beds
      this.sentData.priceRooms = this.form.default_price
      this.findBuilding.yqRooms = this.form.idYq
      this.findBuilding.buildingRooms = this.form.building
      countRoomsNumber(this.sentData).then(res => {
        console.info(res.data)
        countNumber1 = res.data
        for (let i = 1; i < this.form.quantity + 1; i++) {
          this.sentData.nameRooms = this.form.floor * 100 + countNumber1 + i
          this.dataProcessed = JSON.parse(JSON.stringify(this.sentData))
          dataList[i - 1] = this.dataProcessed
        }
        insertRoomsPlus(dataList).then(res1 => {
          if (res1.data) {
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.getRoomList()
            this.dialogFormVisible = false
          } else {
            this.$message({
              type: 'warning',
              message: '插入失败 可能原因：插入条数过多'
            })
          }
        })
      })
    },

    handleSizeChange: function (size) {
      this.query.pagesize = size
      this.getRoomList()
    },
    handleCurrentChange: function (currentPage) {
      this.query.pageNo = currentPage
      this.getRoomList()
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('修改成功！')
          this.passValue()
          this.getRoomList()
          this.dialogForm2Visible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submitForm2 (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.passValue2()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submitForm3 () {
      this.$refs.form3.validate(flag => {
        if (flag) {
          editbedManage(this.form3).then(res => {
            if (res.data) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.dialogVisible = false
              this.$emit('ok')
              location.reload()
            }
          })
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    resetFormUpdate () {
      // 重置功能
      this.form.building = ''
    },
    resetFormUpdate1 () {
      // 重置功能
      this.ruleForm.building = ''
    }
  },
  computed: {
    filterItems () {
      return this.buildingData.filter(item => item.yqBuildings === this.ruleForm.idYq)
    },
    filterItems2 () {
      return this.buildingData.filter(item => item.yqBuildings === this.form.idYq)
    }
  },
  created () {
    this.getYqList()
    this.getBuildingList()
    this.getRoomList()
  }
}
</script>

<style lang="less" scoped>
@import "../../../../assets/styles/pages";
.btn2{
    padding: 10px;
    width: 80px;
    border-radius: 5px;
    background: #275ce6;
    margin-top: -30px;
    text-align: center;
    display: inline-block;
    position: absolute;
    right:116px
}
.btn1{
    padding: 10px;
    width: 80px;
    border-radius: 5px;
    background: #275ce6;
    margin-top: -30px;
    text-align: center;
    display: inline-block;
    position: absolute;
    right:25px
}
</style>
